<template>
  <div>
    <h1>HOME</h1>
    <div>
      <button @click="toNews">新闻</button>
      <button @click="toMusic">音乐</button>
      <button @click="toGame">游戏</button>
    </div>
    <div>
      <button @click="toNewsReplace">新闻Replace</button>
      <button @click="toMusicReplace">音乐Replace</button>
      <button @click="toGameReplace">游戏Replace</button>
    </div>
    <div>
      <button @click="$router.go(-2)">回退2</button>
      <button @click="$router.back()">后退1</button>
      <button @click="$router.forward()">前进1</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  /* 
    //编程式路由导航中重复导航抛出错误的处理方式
      1. 因为push或者replace方法只书写第一个参数location的时候,则会返回promise实例,我们直接使用catch(()=>{})处理即可
      2. push或者replace可以接受第二个和第三个参数,都是回调函数,用来处理成功和失败
  
  */
  methods: {
    toNews() {
      //处理方式2:
      const result = this.$router.push(
        "/home/news",
        () => {},
        () => {}
      );

      console.log(result, this);
      //处理方式1:
      // result.catch(() => {});
    },
    toMusic() {
      this.$router.push({
        path: "/home/music",
      });
    },
    toGame() {
      this.$router.push({
        name: "Game",
      });
    },
    toNewsReplace() {
      this.$router.replace("/home/news");
    },
    toMusicReplace() {
      this.$router.replace("/home/music");
    },
    toGameReplace() {
      this.$router.replace("/home/game");
    },
  },
};

/*
  如何判断then和catch的返回值????
    1. 先判断是否穿透,穿透的意思就是当前then或者catch返回调用当前方法的promise实例,如果当前方法中没有处理该promise实例的回调函数,则默认直接穿透
    2. 如果没有穿透,说明当前方法中有处理当前promise的回调函数,
      - 不管是catch还是then都是默认返回成功promise
      - 如果catch或者then中的回调函数中有没有处理的异常抛出或者返回一个失败的promise实例,则then和catch返回失败的promise实例

*/
/* Promise.reject()
  .catch(() => {})
  .then(() => {});
Promise.reject()
  .catch()
  .then(() => {});
Promise.reject()
  .then()
  .catch(() => {});
Promise.reject()
  .then(() => {})
  .catch(() => {});
Promise.reject()
  .then(
    () => {},
    () => {}
  )
  .catch(() => {});
Promise.reject()
  .then(
    () => {},
    () => {}
  )
  .then(() => {}); */
</script>

<style></style>
